<template>
    <div class="PopBlog">
        <h1>
            <router-link :to="{name:'Blog'}">
                热门博客
                <i class="fa fa-chevron-right"></i>
            </router-link>
        </h1>
        <article>
            <div class="BlogTag" v-for="{picUrl,name,playCount,copywriter,category,item} in PopBlog" :key="item">
                <div class="img">
                    <img :src="picUrl">
                    <i class="fa fa-play"></i>
                </div>
                <div class="info">
                    <p>{{copywriter}}</p>
                    <p><a class="Tag">{{category}}</a></p>
                    <p>
                        <a>{{name}}</a>
                        <span>
                            <i class="fa fa-play-circle-o">{{playCount}}</i>
                        </span>
                    </p>
                </div>
            </div>
        </article>
    </div>
</template>

<script>
import {PopBlog} from '@/library/api/api'
export default {
    name:'PopBlog',
    data() {
        return {
            PopBlog:{},
            playCount:{}
        }
    },
    created() {
        PopBlog({}).then(res=>{
            this.PopBlog = res.djRadios.map(item=>{
                return item
            })
            this.playCount = res.djRadios.map(item=>{
                if(item.playCount>10000000) {
                    return item.playCount = parseInt((item.playCount/10000000)) +" 亿"
                }else if(item.playCount>1000) {
                    return item.playCount = parseInt((item.playCount/10000)) +" 万"
                }
                return item.playCount
            })
            this.PopBlog.length = 6
        })
    }
}
</script>

<style lang="scss" scoped>
@import './PopBlog.scss'
</style>
